<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/images/favicon.png" type="image/png">
    <title>header</title>

    <!--Begin  Page Level  CSS -->
    <!--<link href="assets/plugins/morris-chart/morris.css" rel="stylesheet">-->
    <link href="assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

</head>

<body class="sticky-header">


<!-- main content start-->


<!-- header section start-->
<div class="header-section">

    <a class="toggle-btn"><i class="fa fa-bars"></i></a>

    <form class="searchform">
        <input type="text" class="form-control" name="keyword" placeholder="Search here..."/>
    </form>

    <!--notification menu start -->
    <div  class="menu-right">
        <ul class="notification-menu">
            <li>
                <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                    <i class="fa fa-tasks"></i>
                    <span class="badge">6</span>
                </a>
                <div class="dropdown-menu dropdown-menu-head pull-right">
                    <h5 class="title">You have 8 pending task</h5>
                    <ul class="dropdown-list">
                        <li class="notification-scroll-list notification-list ">
                            <!-- list item-->
                            <a href="javascript:void(0);" class="list-group-item">
                                <div class="media">
                                    <div class="pull-left p-r-10">
                                        <em class="fa  fa-shopping-cart noti-primary"></em>
                                    </div>
                                    <div class="media-body">
                                        <h5 class="media-heading">A new order has been placed.</h5>
                                        <p class="m-0">
                                            <small>29 min ago</small>
                                        </p>
                                    </div>
                                </div>
                            </a>

                            <!-- list item-->
                            <a href="javascript:void(0);" class="list-group-item">
                                <div class="media">
                                    <div class="pull-left p-r-10">
                                        <em class="fa fa-check noti-success"></em>
                                    </div>
                                    <div class="media-body">
                                        <h5 class="media-heading">Databse backup is complete</h5>
                                        <p class="m-0">
                                            <small>12 min ago</small>
                                        </p>
                                    </div>
                                </div>
                            </a>

                            <!-- list item-->
                            <a href="javascript:void(0);" class="list-group-item">
                                <div class="media">
                                    <div class="pull-left p-r-10">
                                        <em class="fa fa-user-plus noti-info"></em>
                                    </div>
                                    <div class="media-body">
                                        <h5 class="media-heading">New user registered</h5>
                                        <p class="m-0">
                                            <small>17 min ago</small>
                                        </p>
                                    </div>
                                </div>
                            </a>

                            <!-- list item-->
                            <a href="javascript:void(0);" class="list-group-item">
                                <div class="media">
                                    <div class="pull-left p-r-10">
                                        <em class="fa fa-diamond noti-danger"></em>
                                    </div>
                                    <div class="media-body">
                                        <h5 class="media-heading">Database error.</h5>
                                        <p class="m-0">
                                            <small>11 min ago</small>
                                        </p>
                                    </div>
                                </div>
                            </a>

                            <!-- list item-->
                            <a href="javascript:void(0);" class="list-group-item">
                                <div class="media">
                                    <div class="pull-left p-r-10">
                                        <em class="fa fa-cog noti-warning"></em>
                                    </div>
                                    <div class="media-body">
                                        <h5 class="media-heading">New settings</h5>
                                        <p class="m-0">
                                            <small>18 min ago</small>
                                        </p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="last"><a href="#">View all notifications</a></li>
                    </ul>
                </div>
            </li>

            <li>
                <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                    <i class="fa fa-bell-o"></i>
                    <span class="badge">4</span>
                </a>
                <div  class="dropdown-menu dropdown-menu-head pull-right">
                    <h5 class="title">Notifications</h5>
                    <ul class="dropdown-list normal-list">
                        <li class="message-list message-scroll-list">
                            <a href="#">
                                    <span class="photo"> <img :src="assets/images/avatar/name"
                                                              class="img-circle" alt="img"></span>
                                <span class="subject">石头记</span>
                                <span class="message"> New tasks needs to be done</span>
                                <span class="time">15 minutes ago</span>
                            </a>
                        </li>
                        <li class="last"><a href="#">All Messages</a></li>
                    </ul>
                </div>
            </li>
            <li id="div_vue">
                <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <img :src="avatar" alt=""/>
                    John Doe
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                    <li><a href="#"> <i class="fa fa-wrench"></i> uff </a></li>
                    <li><a href="#"> <i class="fa fa-user"></i> Profile </a></li>
                    <li><a href="#"> <i class="fa fa-info"></i> Help </a></li>
                    <li><a href="#"> <i class="fa fa-lock"></i> Logout </a></li>
                </ul>
            </li>

        </ul>
    </div>
    <!--notification menu end -->

</div>
<!-- header section end-->


<!--End main content -->


<!--Begin core plugin -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/moment/moment.js"></script>
<script src="assets/js/jquery.slimscroll.js "></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/functions.js"></script>
<!-- End core plugin -->

<!--Begin Page Level Plugin-->
<!--<script src="assets/plugins/morris-chart/morris.js"></script>-->
<!--<script src="assets/plugins/morris-chart/raphael-min.js"></script>-->
<!--<script src="assets/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>-->
<!--<script src="assets/pages/dashboard.js"></script>-->
<!--End Page Level Plugin-->
<!--====== Vue js ======-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--====== http util js ======-->
<script src="assets/js/util/http-util.js"></script>
<!--  httputil  -->
<script src="assets/js/util/http-util.js"></script>

</body>
<script>
    var vmm = new Vue({
        el: '#div_vue',
        data: {
            avatar: ""
        },
        methods: {
            getAvatar: function () {
                console.log("进入方法");
                let url = "/shop_admin/getAvatar";
                let thisObj = this;
                doGet(url, function (resp) {
                    thisObj.avatar = "assets/images/avatar/"+resp;
                    console.log(thisObj.avatar);
                })
            }
        },
        mounted: function () {
            this.getAvatar();
        }
    })

</script>
</html>
